<script setup lang="ts">
import {http} from '@/utlis/http.ts'
   
  import { onMounted, ref } from 'vue'
  let Props = defineProps(['guessList','pageParam'])
  // let prop=defineProps
  // // 分页参数
  // // 猜你喜欢的列表
  // const guessList = ref(false)

  </script>
  
  <template>
    <!-- 猜你喜欢 -->
    <view class="m_box">
      <view class="caption">
        <text class="text">妈咪好评榜</text>
      </view>
        <view v-if="guessList" class="guess">
        <navigator
          class="comment_box"
          v-for="item in guessList"
          :key="item.id"
          :url="`/pages/detail/detail?id=${item.matron_id}`"
  
        >
         
              <view class="box_img" >
                <!-- #ifdef H5 -->
                <img
                v-if="!(item.url_list.length==0)" 
              class="c_img"
              :src="item.url_list[0].url"
                mode="scaleToFill"
              />
                <!-- #endif -->
                <!-- #ifdef MP-WEIXIN -->
                <img
                v-if="!(item.url_list.length==0)" 
              class="c_img"
              :src="item.url_list[0].url"
                mode="scaleToFill"
              />
                <!-- #endif -->
        </view>
          
            <uni-rate
            v-model="item.star"
            size="20"
      readonly="true"
      margin="10px"
            :is-fill="false"
            :margin="5"
            />
            <view class="c_text">
              {{ item.comment }} 
            </view>
        
            <view class="c_user">
            <view style="display: flex; align-items: center;flex-grow: 1;">
              <image
              :src="item.user_img"
              class="user_img"
              mode="scaleToFill"
            />
            <text class="user_name">{{item.user_name}}</text>
            </view>
            <text class="user_date">{{item.create_date}}</text>
            </view>
        
        </navigator>
      </view>
      <view class="loading-text">
        {{ pageParam.page_num>=pageParam.page_count ? '没有更多数据~' : '正在加载...' }}
      </view>
    </view>
    
  </template>
  
  <style lang="scss">
  
  .m_box{
    margin: 0 3px;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
  }
:host {
  display: block;
}
.loading-text{
  text-align: center;
}
.guess{
column-count: 2;
column-gap: 1px;
column-width: 325rpx;
grid-column-start: span;
.comment_box{

height: auto;
margin-top: 20rpx;
margin: 7px;
background-color: #fff;
border-radius: 5px;
overflow: hidden;
.box_img{
  position: relative;
min-height: 100px;
max-height: 250px;
overflow: hidden;
width: 100%;	
margin-bottom: 5px;
&::after{
  /* position: absolute;
  color: rgba(0, 0, 0, 1);
  font-size: 28rpx;
  bottom: 14rpx;
  right: 13rpx;
  content: '1/3';
  padding: 0px 2px; */
  /* border: 1px solid rgba(0, 0, 0, 1); */

}
.c_img{
  width: 100%;
height: 100%;
object-fit: fill;
}
}
.c_text{

display: -webkit-box;

margin: 5px;
font-size: 11px;
line-height: 14px;
overflow: hidden;
-webkit-box-orient: vertical;
color: rgba(0, 0, 0, 0.6);
/*  */
text-overflow: ellipsis;
-webkit-line-clamp: 4;
letter-spacing: 0.1em;
}
.c_user{
width: 100%;

display: flex;
align-items: center;
border-top:0.5px solid rgba(0, 0, 0, 0.3);
font-weight: 600;
font-size: 9px;
.user_img{
  margin: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;

}
.user_name{
  font-size: 10px;
  padding-left: 3px;
  font-weight: 700;
}
.user_date{
  flex-grow: 1;
  text-align: right;
  font-weight: 500;
  margin: 9px;
color: rgba(0, 0, 0, 0.3);
}
}
}
}
/* 分类标题 */
.caption {
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 13px 0;
  margin-bottom: 5px;
  font-size: 32rpx;
  color: #262626;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28rpx 0 30rpx;

    &::before,
    &::after {
      content: '';
      width: 20px;
      height: 20px;
      background-image: url(@/static/hot.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }
}


/* 猜你喜欢 */


page {
background-color: #f7f7f7;
height: 100%;

}
  </style>
  